<template>
	<view class="root">
		<!-- tab-->
		<view class="header-box" :style="{'background':headerInfo.headerBackground}">
			<view class="header">
				<view class="app-info-box">
					<image v-if="headerInfo&& headerInfo.isShow&&headerInfo.logo&&headerInfo.logo.url" class="logo"
						:src="headerInfo.logo.url"></image>
					<view class="title" :style="{'color':headerInfo.nameColor}">{{headerInfo.name}}</view>
				</view>
				<view class="tabs">
					<!-- :class="{'active':activeIndex == tabIndex}" -->
					<view v-for="(tabItem,tabIndex) in headerInfo.tabbar" :key="tabIndex" @click="scrollTo(tabIndex)"
						class="tabs-item" :style="{'color':headerInfo.tabColor}">
						{{tabItem}}
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<scroll-view class="content" scroll-y="true" :scroll-into-view="currentId">
			<view id="row0">
				<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="3000">
					<swiper-item v-for="(posterItem,posterIndex) in posterData" @click="toUrl(posterItem)"
						:key="posterIndex" :style="{'background':posterItem.bannerBackground}" style="width:100vw;">

						<view class="pos-box">
							<view class="pos-column">
								<text class="pos-title"
									:style="{'color':posterItem.titleColor}">{{posterItem.title}}</text>
								<text class="pos-tip"
									:style="{'color':posterItem.subTitleColor}">{{posterItem.subTitle}}</text>
							</view>

							<template v-if="posterItem&&posterItem.bannerfile&&posterItem.bannerfile.url">
								<image v-if="showMob" class="pos-img" mode="aspectFit" :src="posterItem.bannerfile.url">
								</image>
								<image v-else style="width: 500px;height:500px;" mode="aspectFit"
									:src="posterItem.bannerfile.url"></image>
								<!-- 
								style="width: 500px;height:500px;border: red solid 1px;"
								<image v-else :style="{'width':posterWidth + 'px','height':posterHeight + 'px'}"
									@load="loadImg" mode="aspectFit" :src="posterItem.bannerfile.url"></image> -->
							</template>

						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 下载 -->
			<view id="row1" v-if="downloadInfo.length">
				<view class="main-title" :style="{'color':headerInfo.titleColor}">{{headerInfo.tabbar[1]}}</view>
				<!-- <view class="download-title" :style="{'color':titleColor}">根据你的手机，选择下载</view> -->
				<view class="pro-box">
					<view v-for="(item,index) in downloadInfo" :key="index" @click="toUrl(item)" class="app-download">
						<image v-if="item.bannerfile&&item.bannerfile.url" class="app-download-img"
							:src="item.bannerfile.url"></image>
						<view class="app-download-type">{{downloadType(item.type)}}</view>
					</view>
				</view>
			</view>
			<!-- app介绍 -->
			<view id="row2">
				<view class="main-title" :style="{'color':headerInfo.titleColor}">{{headerInfo.tabbar[2]}}</view>
				<text class="mob-size">{{appIntroduce.slogan}}</text>
				<view class="app-info">
					<li v-for="(info,k) in appIntroduce.content" :key="k" class="app-text">{{info}}</li>
				</view>
				<image v-if="appIntroduce.showImg&&appIntroduce.showImg.url" class="pro-img"
					:src="appIntroduce.showImg.url" mode="widthFix"></image>
			</view>
			<!-- 公司介绍 -->
			<view id="row3">
				<text class="main-title" :style="{'color':headerInfo.titleColor}">{{headerInfo.tabbar[3]}}</text>
				<text class="mob-size">{{comIntroduce.slogan}}</text>
				<view class="adv-box">
					<view v-for="(comItem,comIndex) in comIntroduce.content" :key="comIndex" class="adv-item">
						<image v-if="comItem.iconImg&&comItem.iconImg.url" class="adv-icon" :src="comItem.iconImg.url">
						</image>
						<view class="adv-title-box">
							<view class="adv-title">{{comItem.title}}</view>
							<view class="adv-detail">{{comItem.subTitle}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 关于我们 -->
			<view id="row4">
				<view class="main-title" :style="{'color':headerInfo.titleColor}">{{headerInfo.tabbar[4]}}</view>
				<view class="foot-title-box">
					<view class="foot-column" style="margin-right: 5%;">
						<text v-if="aboutus.mobile" class="text-p"
							:style="{'color':aboutus.footColor}">联系电话：{{aboutus.mobile}}</text>
						<text v-if="aboutus.email" class="text-p"
							:style="{'color':aboutus.footColor}">联系邮箱：{{aboutus.email}}</text>
					</view>
					<view class="foot-column">
						<text v-if="aboutus.QQgroup" class="text-p"
							:style="{'color':aboutus.footColor}">交流QQ群：{{aboutus.QQgroup}}</text>
						<text v-if="aboutus.address" class="text-p mob-address"
							:style="{'color':aboutus.footColor}">联系地址：{{aboutus.address}}</text>
					</view>
				</view>
				<view class="foot-bottom">
					<view class="foot-beian">
						<view v-if="aboutus.beianhao" class="beian-text" :style="{'color':aboutus.footColor}"
							@click="openUrl(aboutus.beianhaoUrl)">
							{{aboutus.beianhao}}
						</view>
						<view class="a-link" @click="openUrl(aboutus.beiandiUrl)">
							<image class="beian-logo" src="../../static/common/beian.png"></image>
							<view v-if="aboutus.beiandi" class="beian-text" :style="{'color':aboutus.footColor}">
								{{aboutus.beiandi}}
							</view>
						</view>
					</view>
					<text v-if="aboutus.copyright" class="copy"
						:style="{'color':aboutus.footColor}">{{aboutus.copyright}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// const getconfigObj = uniCloud.importObject('getconfig')
	export default {
		data() {
			return {
				currentId: '',
				posterWidth: "180",
				posterHeight: '',
				showMob: false,
				activeIndex: 0,
				offsetTops: [],
				lock: false,
				headerInfo: {

					"_id": "header",
					"logo": {
						"url": require("../../static/header/logo.png")
					},
					"name": "小伊工作室官网",
					"nameColor": "#ffffff",
					"tabbar": [
						"首页",
						"下载",
						"应用介绍",
						"公司简介",
						"联系我们"
					],
					"tabColor": "#ffffff",
					"headerBackground": "#728af4",
					"titleColor": "#728af4",
					"isShow": true

				},
				//轮播内容
				posterData: [{
						"_id": "65e17bd8fe975f744017da32",
						"status": true,
						"bannerfile": {
							"url": require("../../static/cat/banner1.jpg")
						},
						"open_url": "",
						"title": "小猫养成记：\n一款零投资也能赚钱的App",
						"titleColor": "#fdf085",
						"subTitle": "通过观看视频广告，获得新的金币和限时红包\n等级越高将有机会获得永久分红猫！\n同时邀请好友一起养猫，下线观看视频，邀请者将获得激励红包",
						"subTitleColor": "#ffffff",
						"bannerBackground": "#728af4",
						"sort": 1
					},
					// {
					// 	"_id": "65e17c97213929f86685d9c4",
					// 	"status": true,
					// 	"bannerfile": {
					// 		"url": require("../../static/cat/banner2.jpg")
					// 	},
					// 	"open_url": "",
					// 	"title": "解锁高等级萌猫",
					// 	"titleColor": "#fdf085",
					// 	"subTitle": "等级越高将有机会获得永久分红猫！",
					// 	"subTitleColor": "#ffffff",
					// 	"bannerBackground": "#728af4",
					// 	"sort": 2
					// },
					// {
					// 	"_id": "65e17d219755e3283011da44",
					// 	"status": true,
					// 	"bannerfile": {
					// 		"url": require("../../static/cat/banner3.jpeg")
					// 	},
					// 	"open_url": "",
					// 	"title": "邀请裂变奖励",
					// 	"titleColor": "#fdf085",
					// 	"subTitle": "邀请好友一起养猫，下线观看视频，邀请者将获得激励红包",
					// 	"subTitleColor": "#ffffff",
					// 	"bannerBackground": "#728af4",
					// 	"sort": 3
					// }
				],
				// 下载
				downloadInfo: [{
						"_id": "65e179f755b3372a1fcd525c",
						"type": 1,
						"status": true,
						"bannerfile": {
							"url": require("../../static/cat/Android.png")
						},
						"open_url": "https://game.cat.ikankan.top/appdownload#/",
						"sort": 1
					},
					{
						"_id": "65e18380189f86e370a530a9",
						"type": 2,
						"status": true,
						"bannerfile": {
							"url": require("../../static/cat/ios.png")
						},
						"open_url": "https://apps.apple.com/cn/app/ikankan/id6450889225",
						"sort": 1
					}
				],
				// 应用介绍
				appIntroduce: {
					"_id": "appIntroduce",
					"slogan": "小猫养成记是一款合成类小游戏，通过观看广告，裂变下线赚取现金奖励。\n",
					"content": [
						"玩家通过签到、抽奖等方式赚取金币，使用金币购买低等级猫，将同级别猫合成为更高等级猫；",
						"玩家通过努力，可合成分红猫，获取平台分红收益，可提现；",
						"金币不足时，玩家可通过观看激励视频广告，获取新的金币；",
						"玩家通过邀请好友一起养猫，下线观看激励视频，邀请者可获得激励，可转为现金并在平台提现。"
					],
					"showImg": {
						"url": require("../../static/cat/info.png")
					}
				},
				//更改主体颜色
				// headerBackground: "#728af4", // 头部背景色，主色#e88a4b ----cat 主色#5874D8 -----song
				// swiperBackground: "#728af4", //轮播背景色
				// titleColor: "#728af4", //标题颜色#FF9853
				//公司简介
				"comIntroduce": {
					"_id": "comIntroduce",
					"slogan": "小伊工作室是一家专注于软件开发的个人工作室，致力于提供高质量的APP、小程序等应用。" +
					"\n作为一家年轻而充满活力的公司，我们注重创新和技术研发，不断突破，努力创造更大的价值。"
					+"\n在未来的发展中，小伊工作室将继续坚持技术创新的原则，不断提升自身实力，实现创新。",
					"content": [{
							"title": "发展方向",
							"subTitle": "专注于高质量APP，小程序开发",
							"iconImg": {
								"url": require("../../static/cat/icon1.png"),
								"extname": "png",
								"name": "shuijiao.png"
							}
						},
						{
							"title": "企业产品",
							"subTitle": "小猫养成记、AI红包封面、AI壁纸、Sora助手、虚拟助手等",
							"iconImg": {
								"url": require("../../static/cat/icon2.png"),
								"extname": "png",
								"name": "shuijiao.png"
							}
						}
					]
				},
				aboutus: {
					"_id": "aboutus",
					"mobile": "18888888888",
					"email": "wsl2006_7@126.com",
					"QQgroup": "161895258",
					"address": "江苏省常州市",
					"beianhao": "苏ICP备2023023109号-1",
					"beianhaoUrl": "https://beian.miit.gov.cn/#/Integrated/index",
					"beiandi": "苏公网安备32041202001930号",
					"beiandiUrl": "https://beian.mps.gov.cn/#/query/webSearch",
					"copyright": "©2024 小伊工作室版权所有",
					"footColor": "#888888"
				}
			}
		},
		onLoad() {
			// this.getBanner()
			// this.getConfig()
			// this.getDownload()
		},
		created() {
			// 定义变量获取屏幕视口宽度
			var windowWidth = document.documentElement.clientWidth

			if (windowWidth < 750) {
				this.showMob = true
				console.log("mob----windowWidth: ", windowWidth);
			} else {
				this.showMob = false
				console.log("pc----windowWidth: ", windowWidth);
			}
		},
		methods: {
			loadImg(e) {
				console.log("e:----loadImg ", e);
				// 	this.posterWidth = e.detail.width
				// 	this.posterHeight = e.detail.height
			},
			getConfig() {
				getconfigObj.getConfig().then((res) => {
					console.log("res:-----getConfig ", res.data);
					this.headerInfo = res.data[0]
					this.appIntroduce = res.data[1]
					this.comIntroduce = res.data[2]
					this.aboutus = res.data[3]
				}).catch((err) => {
					console.log("err: ", err);
				})
			},
			getBanner() {
				getconfigObj.getBanner().then((res) => {
					console.log("res:----getBanner ", res);
					this.posterData = res.data
				}).catch((err) => {
					console.error(err)
				})
			},
			getDownload() {
				getconfigObj.getDownload().then((res) => {
					console.log("res:----getDownload ", res);
					this.downloadInfo = res.data
				}).catch((err) => {
					console.error(err)
				})
			},
			downloadType(type) {
				switch (type) {
					case 0:
						return 'H5'
						break;
					case 1:
						return 'Android'
						break;
					case 2:
						return 'ios'
						break;
					case 3:
						return '小程序'
						break;
					default:
						break;
				}
			},
			toUrl(item) {
				console.log("item: ", item);
				if (item.open_url) {
					window.open(item.open_url)
				}
			},
			openUrl(url) {
				window.open(url);
			},
			scrollTo(index) {
				this.activeIndex = index
				this.currentId = 'row' + index;
			}
		}
	}
</script>

<style>
	body {
		padding: 0;
		margin: 0;
	}

	view {
		display: flex;
		box-sizing: border-box;
	}

	.root {
		flex-direction: column;
		width: 100%;
		flex: 1;
		height: 100vh;
	}

	.content {
		flex-direction: column;
		justify-content: center;
		height: calc(100vh - 100px);
	}

	#row0,
	#row1,
	#row2,
	#row3,
	#row4 {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 手机端 */
	@media screen and (max-width: 750px) {

		.header {
			flex-direction: column;
			padding: 0 10px;
		}

		.title {
			font-size: 22px;
		}

		.app-info {
			width: 80%;
		}

		.app-text {
			width: 100%;
			font-size: 15px;
			color: #888888;
			line-height: 22px;
			margin-bottom: 20rpx;
		}

		.a-link {
			margin-right: 36px;
		}

		.copy {
			font-size: 14px;
		}

		.logo {
			width: 50px;
			height: 50px;
		}

		.tabs {
			overflow-x: scroll;
			width: 100%;
		}

		.tabs-item {
			width: 80px;
			flex-shrink: 0;
			line-height: 25px;
			margin-right: 10px;
			font-size: 14px;
		}

		.active {
			font-size: 16px;
		}

		.pos-column {
			flex-direction: column;
			width: 40%;
		}

		.pos-box {
			width: 100%;
			justify-content: space-around;
			align-items: center;
			display: flex;
			flex-direction: row;
			margin-top: 50px;
		}

		.pos-title {
			width: 100%;
			font-size: 18px;
			line-height: 30px;
		}

		.pos-img {
			width: 180px;
		}

		.pos-tip {
			font-size: 14px;
			line-height: 30px;
		}

		.main-title {
			font-size: 24px;
			margin: 40px 0;
		}

		.download-title {
			font-size: 20px;
			margin-bottom: 10px;
		}

		.pro-box {
			width: 100%;
			flex-wrap: wrap;
			justify-content: space-around;
		}

		.qr-download-img {
			width: 100px;
			height: 100px;
		}

		.pro-img {
			width: 90vw;
			height: 300px;
			margin-top: 30px;
		}

		.adv-box {
			flex-direction: column;
			align-items: center;
			margin: 30px 0 50px 0;
			flex-wrap: wrap;
			justify-content: center;
		}

		.adv-detail {
			width: 220px;
			font-size: 15px;
			line-height: 25px;
			color: #888888;
		}


		.text-p {
			width: 100px;
			font-size: 14px;
			line-height: 25px;
			margin-bottom: 20rpx;
		}

		.mob-address {
			width: 160px;
		}


		.adv-title {
			font-size: 20px;
			max-width: 220px;
		}

		.adv-item {
			margin: 20px 0;
		}

		.carousel {
			height: 300px;
		}

		.app-download {
			width: 150px;
			height: 185px;
			margin: 20rpx 0rpx;
		}

		.app-download-img {
			width: 120px;
			height: 120px;
			margin-bottom: 10px;
		}

		.app-download-type {
			font-size: 18px;
		}

		.mob-size {
			width: 90%;
			font-size: 16px;
		}

		.foot-column {
			flex-direction: column;
			width: 100%;
		}

		.foot-title-box {
			width: 90vw;
			justify-content: space-around;
		}

		.foot-beian {
			flex-direction: column;
		}

		.beian-text {
			line-height: 25px;
			font-size: 14px;
		}
	}

	/* pc端 */
	@media screen and (min-width: 640px) {

		.header {
			flex-direction: row;
			padding: 0 50px;
		}

		.app-text {
			width: 100%;
			font-size: 18px;
			margin-bottom: 20rpx;
			color: #888888;
		}

		.logo {
			width: 60px;
			height: 60px;
			flex-shrink: 0;
		}

		.tabs-item {
			width: 100px;
			justify-content: center;
			margin-right: 30px;
			font-size: 20px;
		}

		.active {
			font-size: 24px;
		}

		.pos-box {
			width: 100%;
			padding: 0 30px;
			height: 610px;
			justify-content: center;
			align-items: center;
			/* margin-top: 80px; */
		}

		.pos-title {
			font-size: 45px;
			margin-bottom: 10px;
			line-height: 60px;
		}

		.pos-column {
			flex-direction: column;
			width: 40%;
		}

		.pos-img {
			/* width: 35%; */
			/* width:300px; */
			/* border: red solid 2px; */
		}

		.pos-tip {
			font-size: 26px;
		}

		.main-title {
			font-size: 40px;
			margin: 80px 0;
		}

		.download-title {
			font-size: 25px;
			margin-bottom: 30px;
		}

		.qr-download-img {
			width: 160px;
			height: 160px;
		}

		.pro-img {
			width: 60vw;
			height: auto;
			margin-top: 30px;
		}

		.app-info {
			width: 50%;
		}

		.adv-box {
			flex-direction: row;
			align-items: center;
			margin: 50px 0;
			width: 73%;
			flex-wrap: wrap;
			justify-content: center;
		}

		.adv-detail {
			width: 400px;
			font-size: 18px;
			line-height: 30px;
			color: #888888;
		}

		.foot-title-box {
			width: 70vw;
			flex-direction: row;
		}

		.adv-title {
			font-size: 24px;
			max-width: 350px;
		}

		.adv-title-box {
			margin-right: 30px;
		}

		.carousel {
			height: 610px;
		}

		.title {
			font-size: 30px;
		}

		.app-download {
			width: 250px;
			height: 300px;
			margin: 0vw 3vw;
		}

		.app-download-img {
			width: 180px;
			height: 180px;
			margin-bottom: 15px;
		}

		.app-download-type {
			font-size: 22px;
		}

		.mob-size {
			font-size: 20px;
			text-align: center;
			width: 80%;
		}

		.foot-column {
			flex-direction: column;
			width: 100%;
		}

		.foot-beian {
			flex-direction: row;
		}

		.beian-text {
			line-height: 40px;
		}

	}

	.adv-title {
		font-weight: 600;
		margin-bottom: 20px;
	}

	.header-box {
		z-index: 88;
		top: 0;
		left: 0;
		height: 100px;
		width: 100%;
	}

	.header {
		width: 100%;
		align-items: center;
		justify-content: space-around;
		background: rgb(255, 255, 255, 0.1);
	}

	.app-info-box {
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	.title {
		font-weight: 700;
	}

	.logo {
		border-radius: 15px;
		margin-right: 20px;
	}

	.tabs {
		align-items: center;
	}

	.tabs-item {
		justify-content: center;
		cursor: pointer;
		font-weight: 600;
	}

	.active {
		color: #e6e6e6;
		transition: all 0.5s;
		font-weight: 600;
	}


	.carousel {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		z-index: 66;
	}

	.pos-box {
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.pos-tip {
		color: #FFFFFF;
	}

	.pos-title {
		font-weight: bold;
	}


	.main-title {
		font-weight: bold;
		justify-content: center;
	}

	.mob-size {
		font-weight: 600;
		color: #1a1a1a;
		line-height: 25px;
		margin-bottom: 80rpx;
	}

	.app-qr {
		border-radius: 10px;
		justify-content: center;
		align-items: center;
		border: #EEEEEE solid 1px;
		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	}

	.app-download {
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		justify-content: center;
		align-items: center;
		border: #EEEEEE solid 1px;
		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	}

	.app-download:hover {
		cursor: pointer;
		background: #f1f1f1;
		border: #EEEEEE solid 2px;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	}

	.app-download-img {
		justify-content: center;
		align-items: center;
	}

	.app-info {
		display: flex;
		flex-direction: column;
	}

	.adv-item {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		margin: 50rpx 0;
	}

	.adv-title-box {
		flex-direction: column;
		align-items: flex-start;
	}

	.adv-icon {
		width: 60px;
		height: 60px;
		margin-right: 30px;
	}

	.foot-title-box {
		justify-content: space-between;
	}

	.foot-bottom {
		margin-top: 50px;
		margin-bottom: 30px;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.foot-beian {
		display: flex;
		align-items: center;
	}

	.beian-logo {
		width: 30px;
		height: 30px;
		margin-left: 30px;
		margin-right: 10px;
	}

	.beian-text {
		color: #888888;
		display: inline-block;
	}

	.a-link {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.aboutus {
		color: #EEEEEE !important;
	}
</style>